<template>
	<view style="height: 100vh;background: #fff;">
		<view style="padding:0 28px;">


			<view v-if="step===2">
				<view style="display: flex;justify-content: center;padding-top: 27px;">
					<image src="/static/images/logo.png" class="logoImg"></image>
				</view>

				<view class="login-title" style="padding-top: 27px;">找车 上方程物流</view>
				<view class="log-iptw" style="margin-top: 76px;">
					<image src="@/static/login1.png"></image>
					<input class="ipt" type="number" v-model="logForm.phone" placeholder="请输入手机号码" />
				</view>

				<view class="log-iptw">
					<image src="@/static/login3.png"></image>
					<input class="ipt" type="text" v-model="logForm.code" placeholder="请输入验证码" />
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<view @tap="getCode" class="rig">{{tips}}</view>
				</view>

				<view class="bottombtn loginBottombtn" @click="login">登录</view>
			</view>

			<view v-if="step===3">
				<view class="login-title">找车 上方程物流</view>
				<image class="loginIMg2" src="/static/images/lbg.png"></image>

				<view class="bottombtn loginBottombtn" style="margin-top: 48px;" @click="loginFinclip">快捷登录</view>
				<view style="margin-top: 30px;font-size: 11px;color: #83878E;text-align: center;">
					由内蒙古大晔网络科技有限公司提供技术支持和运营服务</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setToken,
		setUserInfo,
		getToken,
		setPermission
	} from '@/utils/auth'
	import {
		testMobile
	} from '@/utils/common'
	import {
		sendCheckCode,
		loginByCode,
		getUserInfo,
		mmbLogin,
	} from '@/request/api.js'
	export default {
		data() {
			return {
				step: 2, //2 小程序登录  3//finclip快捷登录
				// isRead: false,
				isRead: false,
				tips: '',
				logForm: {
					username: '',
					phone: '', //15652622196
					code: '',
					password: '', //1234
				},
				zdyphone: '',
				rules: {
					'phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					'username': {
						required: true,
						message: '此为必填字段',
						trigger: ['blur', 'change'],
					},
					'password': {
						required: true,
						message: '此为必填字段',
						trigger: ['blur', 'change'],
					},
					'code': {
						required: true,
						message: '此为必填字段',
						trigger: ['blur', 'change'],
					},

				},
			}
		},
		onShareAppMessage() {
			// return {
			// 	title: '汇能通汇电子合同录入系统',
			// 	path: '/pages/index/index'
			// };
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		},
		onLoad() {
			if (getToken()) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			getUInfo() {
				getUserInfo().then(res => {
					setUserInfo(res.data)
					// setPermission(res.permissions)
				})
			},
			loginFinclip() {
				ft.getUserData({
					success: (msg) => {
						console.log("user info: ", msg)
						mmbLogin({
							authCode: msg.authCode
						}).then(msg => {
							setToken(msg.data.token)
							this.getUInfo()
							uni.$u.toast('登录成功')
							uni.reLaunch({
								url: '/pages/index/index'
							})
						})
					}
				});
				return
				const that = this
				// ft.getMobile({
				// 	success: (res) => {
				// 		console.log("mobile is: ", res['phone']);
				// 		that.zdyphone = res['phone']

				// 		mmbLogin({
				// 			mobile: that.zdyphone
				// 		}).then(msg => {
				// 			setToken(msg.data.token)
				// 			this.getUInfo()
				// 			uni.$u.toast('登录成功')
				// 			uni.reLaunch({
				// 				url: '/pages/index/index'
				// 			})
				// 		})
				// 	}
				// });
			},
			login() {
				if (this.step == 2 && this.logForm.code == '') {
					if (!testMobile(this.logForm.phone)) {
						return
					}
					uni.showToast({
						icon: 'none',
						title: '请输入验证码',
						duration: 1500
					});
					return;
				}

				if (this.step === 2) { //验证码登录
					this.loginStep2()
				} else {
					this.loginStep3()
				}
			},
			loginStep2() {
				let data = {
					mobile: this.logForm.phone,
					checkCode: this.logForm.code,
				}
				loginByCode(data).then(res => {
					setToken(res.data.token)
					this.getUInfo()
					uni.$u.toast('登录成功')
					uni.reLaunch({
						url: '/pages/index/index'
					})
				})
			},
			loginStep3() {

			},

			submitForm() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				this.$refs.uForm.validate().then(res => {
					//uni.$u.toast('校验通过')

				}).catch(errors => {
					//uni.$u.toast('校验失败')
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!testMobile(this.logForm.phone)) {
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.codeMsg()
					}, 500);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeMsg() {
				let data = {
					mobile: this.logForm.phone,
					type: 0
				}
				sendCheckCode(data).then(res => {
					console.log(res)
				})
			},


			wxLogin(e) {
				if (!this.isRead) {
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意用户协议和隐私政策',
						duration: 3000
					});
					return
				}
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					return
				}
				console.log('111', e)
				// e.detail.iv
				// e.detail.encryptedData
				wx.login({
					//成功放回
					success: (resy) => {
						console.log(resy)
						let data = {
							encryptedPhoneData: e.detail.encryptedData,
							phoneIV: e.detail.iv,
							code: resy.code,
						}
						dailiopenbind(data).then(res => {
							// console.log('授权绑定', res)
							setToken(res.data.token)
							//setUserInfo(res.data)
							this.getUInfo()
							uni.$u.toast('登录成功')
							uni.reLaunch({
								url: '/pages/index/index'
							})
						})
					}
				})

			},

			// 隐私协议
			handlePrivacy() {
				const data = {
					title: '隐私协议',
					url: 'https://daye.func56.com/secretpolicy.html'
				}
				uni.navigateTo({
					url: `/pages/webview/index?title=${data.title}&url=${data.url}`
				})
			},
			// 用户协议
			handleUserAgrement() {
				const data = {
					title: '用户协议',
					url: 'https://daye.func56.com/statement.html'
				}
				uni.navigateTo({
					url: `/pages/webview/index?title=${data.title}&url=${data.url}`
				})
			},
		}
	}
</script>

<style scoped>
	.login-title {
		font-weight: bold;
		color: #2E1283;
		font-size: 28px;
		text-align: center;
		padding-top: 48px;
	}

	.loginBottombtn {
		width: 100%;
		border-radius: 27px;
		margin-top: 35px;
	}

	.logoImg {
		width: 100px;
		height: 100px;
		margin: 0 auto;
	}

	.loginIMg2 {
		width: 100%;
		height: 245px;
		margin-top: 49px;
	}
</style>